<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jessie Hu's Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Designer Jessie Hu's page">
    <meta name="author" content="Jewel">
    <!-- Bootstrap -->
    
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	<style>
	  
	  body {
	   padding-top: 60px;
      padding-bottom: 40px;
      color: #5a5a5a;
    }

    /* MARKETING CONTENT
    -------------------------------------------------- */

    /* Center align the text within the three columns below the carousel */
    .marketing .span4 {
      text-align: center;
    }
    .marketing h2 {
      font-weight: normal;
    }
    .marketing .span4 p {
      margin-left: 10px;
      margin-right: 10px;
    }


    /* Featurettes
    ------------------------- */

    .featurette-divider {
      margin: 80px 0; /* Space out the Bootstrap <hr> more */
    }
    .featurette {
      padding-top: 120px; /* Vertically center images part 1: add padding above and below text. */
      overflow: hidden; /* Vertically center images part 2: clear their floats. */
    }
    .featurette-image {
      margin-top: -120px; /* Vertically center images part 3: negative margin up the image the same amount of the padding to center it. */
    }

    /* Give some space on the sides of the floated elements so text doesn't run right into it. */
    .featurette-image.pull-left {
      margin-right: 40px;
    }
    .featurette-image.pull-right {
      margin-left: 40px;
    }

    /* Thin out the marketing headings */
    .featurette-heading {
      font-size: 50px;
      font-weight: 300;
      line-height: 1;
      letter-spacing: -1px;
    }


	</style>
  </head>
  <body>

     <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
		  <div class="container">
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="brand" >Jessie Hu</a>
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
            <div class="nav-collapse collapse">
              <ul class="nav">
				<li class="dropdown active">
                  <a class="dropdown-toggle" data-toggle="dropdown">Portfolios <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#item1">White Cat</a></li>
                    <li><a href="#item2">Yellow Cat</a></li>
                    <li><a href="#item3">Black Cat</a></li>
                  </ul>
                </li>
                <li><a href="#aboutMe">About Me</a></li>
                <li><a href="#cv">CV</a></li>
				<li><a href="loveClear.html">Game</a></li>
                <li><a href="test.php">Game2</a></li>
                <li><a href="tool.php">UID&UK</a></li>
                <li><a href="MongoTest.php">MongoTest</a></li>
                <li><a href="bds/bdsLogSearch.html">bds日志查询</a></li>
              </ul>
            </div><!--/.nav-collapse -->
	      </div> <!-- /.container -->
        </div><!-- /.navbar-inner -->
       </div><!-- /.navbar -->
	
	<a name="aboutMe" id="aboutMe"></a>
    <div class="container">
		<h1>我是Jessie</h1>
        <p class = "lead">我为自己带盐</p>
		<div class="row">
			<div class="span5">
			    <img src="myImg/p4.jpg" width="450"/>
			</div>
			<div class="span7">
				<p class="muted">How are you?</p>
				<p class="text-warning">Do you like cats?</p>
				<p class="text-error">What a beautiful cat.</p>
				<p class="text-info">I like cat.</p>
				<p class="text-success">I hope you do, too.</p>
				<p class="muted">You can see more cats in this page by scrowing down.</p>
				<p class="text-warning">I watch Big Bang Theory.</p>
				<p class="text-error">But it is forbidden to be played at public internet in china.</p>
				<p class="text-info">What a pity.</p>
				<p class="text-success">But I can download it from Baidu Cloud.</p>
			</div>
		</div>
    </div> <!-- /container -->
    
	<a name="portfolios" id="portfolios"></a>	
	<div class="container marketing">
      <a name="item1" id="item1"/>
	  <hr class="featurette-divider">
	  
      <div class="featurette">
        <img class="featurette-image pull-right" src="myImg/p1.jpg" width="550">
        <h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>

      <hr class="featurette-divider">
      <a name="item2" id="item2"/>
      <div class="featurette">
        <img class="featurette-image pull-left" src="myImg/p2.jpg" width="550">
        <h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>

      <hr class="featurette-divider">
      <a name="item3" id="item3"/>
      <div class="featurette">
        <img class="featurette-image pull-right" src="myImg/p5.jpg" width="550">
        <h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
        <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
      </div>

      <hr class="featurette-divider">

      <div class="featurette">
        
		<a name="cv" id="cv"></a>
        <p class="lead">My CV</p>
		<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
				<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
				<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
				<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
				<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
				<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
				<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
				<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
				<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
				<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
				<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
				<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
				<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
				<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
				<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
				<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
				<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
      </div>
      <hr class="featurette-divider">
    </div> <!-- /container -->
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	<div class="container">
	    <h1 class="text-success">游客留言板</h1>
		<table class="table table-hover" id="commentTable" name="commentTable">
			<tr>
				<th>留言</th>
				<th>游客</th>
				<th>留言时间</th>
			</tr>
			<?php
				$dbname = 'OPlJkRdhWkRyICoiPusd';
				$host = 'sqld.duapp.com';
				$port = 4050;
				$user = 'X6ZL8EyTI5Xqf3v8WFcHOQCb';//用户名(api key)
				$pwd = '4Brp0cLHGUsEkVTDhaWMN7IU9t2apffK';//密码(secret key)
				
				// Create connection
				$con = mysqli_connect($host,$user,$pwd,$dbname,$port);
                mysqli_set_charset($con, "utf8");
				// Check connection
				if (mysqli_connect_errno($con))
				  {
				  echo "Failed to connect to MySQL: " . mysqli_connect_error();
				  }
				$result = mysqli_query($con, "SELECT * FROM page_comment");

				while($row = mysqli_fetch_array($result))
				{
				
				$timestamp = strtotime($row['publishTime']);
				//echo $row['publisher']."\t".$row['comment']."\t".date("Y-m-d H:i:s", $timestamp);
				echo "<tr>";
				echo "<td>";
				echo $row['comment'];
				echo "</td>";
				echo "<td>";
				echo $row['publisher'];
				echo "</td>";
				echo "<td>";
				echo date("Y-m-d H:i:s", $timestamp);
				echo "</td>";
				echo "</tr>";
				}
				mysqli_close($con);

			?> 
		</table>
		
		<form type="post">
		  <fieldset>
			<legend>留个言</legend>
			<input id="commentInput" name = "commentInput" type="text" placeholder="Type something…">
			<input id="publisherInput" name="publisherInput" type="text" placeholder="Who are you">
			<button id="submitComment" class="btn" onclick="AddRow()">Submit</button>
		  </fieldset>
		</form>
	</div>
	
	<script type="text/javascript">
	   function   AddRow(){
			var publisher = $("#publisherInput").val();
			var comment = $("#commentInput").val();
			alert("Thanks for your comment.");
			 $.post("addComment.php",{publisher:publisher, comment:comment},function(result){
					if(result==0){
						alert("Soory. Failed.");
						}
					else{
					    $('#commentTable tbody').append(result);
						}
				});
            
     
       }   
	</script>
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>